<template>
  <div class="app-container" v-if="authorityHandle(430)">
    <div class="filter-container">
      <span class="filter-title filter-item"
        >用户身份</span
      >
      <k-select
        v-model="listQuery.roleId"
        class="filter-item right-item"
        style="width: 120px"
        :select-params="[
          {
            label: '普通用户',
            value: '2',
          },
          {
            label: '合作用户',
            value: '3',
          },
        ]"
        @handleSelectEvent="handleFilter"
      />

      <span class="filter-title filter-item">时间</span>
      <k-date-picker
        v-model="timeValue"
        type="datetimerange"
        valueFormat="yyyy-MM-dd HH:mm:ss"
        class="filter-item right-item"
        @hqchang="handleFilter"
      />
      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="进行搜索"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>

    <!--表格相关 -->
    <el-table
      :data="listData"
      border
      fit
      :summary-method="getSummaries"
      :show-summary="!authorityHandle(461)"
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 30px"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @sort-change="sortChange"
    >
      <el-table-column
        min-width="60px"
        type="index"
        label="序号"
        align="center"
      />
      <el-table-column
        prop="mobile"
        min-width="100px"
        label="用户名"
        align="center"
      />
      <el-table-column
        prop="showName"
        min-width="100px"
        label="昵称"
        align="center"
      />
      <el-table-column
        min-width="100px"
        label="身份"
        align="center"
      >
        <template slot-scope="scope">
          {{ getUserType(scope.row.roleId) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="userNum"
        min-width="100px"
        label="下级人数"
        sortable="custom"
        align="center"
      />
      <!-- <el-table-column
        prop="rechargeTotal"
        min-width="100px"
        label="总消费(R)"
        sortable="custom"
        align="center"
      /> -->
      <el-table-column
        prop="consumeTotal"
        min-width="100px"
        label="总流水(F+J)"
        sortable="custom"
        align="center"
      />
      <!-- <el-table-column
        prop="sharePercent"
        min-width="100px"
        label="佣金比例%(J)"
        align="center"
      /> -->
      <el-table-column
        prop="drawTotal"
        min-width="100px"
        label="总佣金(J)"
        align="center"
      />
      <el-table-column
        min-width="50px"
        fixed="right"
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <div class="op-div">
            <k-button
              class="table-btn"
              value="查看详情"
              @click.native="clickDetail(scope.row)"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { userFissionListUserData } from "@/api/avatar";

export default {
  name: "Extension",
  components: { Pagination },
  dicts: ["IDENTITY_TYPE"],
  data() {
    return {
      timeValue: "",
      listData: [],
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: "",
        },
        sort: "", // 排序字段 为对应列名,
        direction: "", // 排序 正向(asc)逆向(desc),
        key: "", // 名称'
        roleId: "", // 身份所属',
        startTime: "", // 最终创建时间",
        endTime: "", // 最早支付时间",
      },
      userNum:"",
      rechargeTotal:"",
      consumeTotal:""
    };
  },
  watch: {
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null;
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null;
    },
  },

  created() {
    this.loadData();
  },
  methods: {
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop;
      if (column.order === "ascending") {
        this.listQuery.direction = "asc";
      } else if (column.order === "descending") {
        this.listQuery.direction = "desc";
      }
      this.loadData();

    },
    /**
     * 合计
     * @param {obj} param
     */
    getSummaries(param) {
      const { columns } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          // 第一列
          sums[index] = "总计";
        } else if (column.property === "userNum") {
          sums[index] = this.userNum;
        } else if (column.property === "rechargeTotal") {
          sums[index] = this.rechargeTotal;
        } else if (column.property === "consumeTotal") {
          sums[index] = this.consumeTotal;
        }
      });
      return sums;
    },
    // 查看详情
    clickDetail(row) {
      this.$router.push({
        path: "/rootplayrules/promotion-settlement-details",
        query: {
          extensionId: row.userId,
        },
      });
    },
    getUserType(userType) {
      let s = "";
      switch (userType) {
        case 2:
          s = "普通用户";
          break;
        case 3:
          s = "合作用户";
          break;
      }
      return s;
    },
    loadData() {
      userFissionListUserData({ ...this.listQuery}).then((res) => {
        const data = res.data;
        this.listData = data.rows;
        this.totalRows = data.totalRows;
        this.userNum=data.totalData.userNum
        this.rechargeTotal=data.totalData.rechargeTotal
        this.consumeTotal=data.totalData.consumeTotal
      });
    },
    // 搜索查询事件
    handleFilter(v, type) {
      if (type !== 1) this.listQuery.pager.pageNo = 1;
      this.loadData();
    },
  },
};
</script>

<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调
.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
  .right-item {
    margin-right: 10px;
  }
  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162e;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}
</style>
